<template>
	<view class="container">
		<view class="title">
			学员信息
		</view>
		<view class="content">
			<view class="cell bor" @click="changeAvatar" style="height: 120rpx;">
				<text>头像</text>
				<view class="avatarContainer" >
					<image :src="info.avatar" mode="" class="avatar"></image>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</view>
			<!-- <view class="cell" @click="open()">
				<text>昵称：</text>
				<view class="cellRight">
					<text class="info">{{info.nickname}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</view> -->
			<view class="cell bor">
				<text>学生证号</text>
				<text>{{info.student_no}}</text>
			</view>
			<navigator class="cell" url="./change_phone" hover-class="none" style="height: 108rpx;">
				<text>手机号</text>
				<view class="cellRight">
					<text class="info">{{info.mobile}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</navigator>
			<view class="line"></view>
			<navigator class="cell bor" url="./student" hover-class="none">
				<text>学生信息</text>
				<view class="cellRight">
					<text class="info">{{info.student_name?info.student_name:'无'}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</navigator>
			<view class="cell bor">
				<text>会员卡号</text>
				<text>{{info.member_no}}</text>
			</view>
			<navigator class="cell bor" url="./card?type=first" hover-class="none">
				<text>第一联系人</text>
				<view class="cellRight">
					<text class="info">{{info.first_contact?info.first_contact:'无'}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</navigator>
			<navigator class="cell bor" url="./card?type=second" hover-class="none">
				<text>第二联系人</text>
				<view class="cellRight">
					<text class="info">{{info.second_contact?info.second_contact:'无'}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</navigator>
			<navigator class="cell" url="./other_card" hover-class="none">
				<text>其他证件</text>
				<view class="cellRight">
					<text class="info">{{info.others?info.others:'无'}}</text>
					<image src="../../../static/img/fanhui.png" mode="" class="icon"></image>
				</view>
			</navigator>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" title="修改昵称" 
			:value="info.nickname"
			message="成功消息" placeholder="修改昵称" :duration="2000"
			 @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				token: "",
			}
		},
		onShow() {
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				}
			});
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// 输入框的值
				console.log(value)
				this.$request('/api/wxapp/mine/info/changeNickname',{
					"token":this.token,
					"nickname":value,
				}).then(res=>{
					if(res.code===1){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.getData();
					}else{
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					}
				})
				this.$refs.popup.close()
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera','album'], //从相册选择
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						uni.uploadFile({
							//请求的url接口地址
							url: 'https://mx.acktechnologies.com.cn/api/wxapp/mine/info/changeAvatar',
							formData: {
								//请求中接口额外的参数
								'token': this.token
							},
							fileType: 'file', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								"Content-Type": "multipart/form-data"
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面
								let info = JSON.parse(res.data)
								if (info.code === 1) {
									this.info.avatar = info.data.image_url;
								}
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
							}
						})
					}
				})
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/myinfo`,
					data: {
						"token": this.token,
					},
					method: 'GET',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if (res.data.code === 1) {
							this.info = res.data.data;
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		overflow: hidden;
	}

	.title {
		font-size: 20px;
		font-weight: 500;
		color: #333333;
		margin: 34rpx 0;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.cell {
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.cellRight {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			image {
				margin-left: 14px;
			}

			.info {
				font-size: 13px;
				color: #999999;
			}
		}

		.icon {
			width: 6px;
			height: 12px;
		}

		.avatarContainer {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.avatar {
				width: 72rpx;
				height: 72rpx;
				background: #EFEFEF;
				border-radius: 36rpx;
				margin-right: 20rpx;
			}
		}

		text:nth-child(1) {
			font-size: 15px;
			color: #333333;
		}

		text:nth-child(2) {
			font-size: 13px;
			color: #999999;
		}
	}
	.line{
		width: 750rpx;
		height: 16rpx;
		background-color: rgba(235,235,235,0.6);
	}
	.bor{
		border-bottom: 0.5px solid rgba(235,235,235,0.6);
	}
</style>
